import React, { memo, useEffect, useState } from 'react'
import { getList,getTea } from './api/index'
import MyButton from './components/MyButton'
import MyTabBar from './components/MyTabBar'
import { Routes,Route } from 'react-router-dom'
const App = memo(() => {
  //声明状态
  const [List, setList] = useState([])
  //声明咖啡状态
  const [coffee,setCoffee] = useState({})
  //声明一个初始化异步函数 调用axios请求
  const initList = async ()=>{
    //拿到请求返回的结果
    const res = await getList()
    //设置状态 触发视图更新
    setList(res.data)
  }
  //第二个初始化函数
  const initCoffee = async ()=>{
    const res = await getTea()
    setCoffee(res.data)
  }
  //组件挂载完毕后调用初始化函数
  useEffect(() => {
    initList()
    initCoffee()
  }, [])
  return (
    <div>
      <table border={"1px"}>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>成绩</th>
          </tr>
        </thead>
        <tbody>
          {
            List.map((item,index)=>(
              <tr key={index}>
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>{item.sex}</td>
                <td>{item.score}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
      <hr></hr>
      <br></br>
      <br></br>
      <br></br>
      <MyButton conf={coffee.cap}></MyButton>
      <MyButton conf={coffee.temp}></MyButton>
      <MyButton conf={coffee.coffee}></MyButton>
      <MyButton conf={coffee.sugar}></MyButton>
      <MyTabBar></MyTabBar>
      <Routes>
        <Route path='/home' element={<div>首页</div>}></Route>
        <Route path='/order' element={<div>点餐</div>}></Route>
        <Route path='/orderFrom' element={<div>订单</div>}></Route>
        <Route path='/my' element={<div>我的</div>}></Route>
      </Routes>
    </div>
  )
})

export default App
